<template>
  <!--案件导入-案件删除-->
  <section class="component case-batch-delete">
    <el-form label-width="100px" :model="deleteModel" :rules="rules" ref="form">
      <el-form-item label="批次号" prop="batchNumber" class="batchInput">
        <el-select placeholder="请选择" v-model="deleteModel.batchNumber">
          <el-option v-for="item in batchList" :key="item.batchNumber" :label="item.batchNumber" :value="item.batchNumber">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="0" class="text-center">
        <span>确定要删除此批次案件吗?</span>
      </el-form-item>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="deleteCase">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import { Emit, Prop, Component } from 'vue-property-decorator';
import { Dependencies } from '~/core/decorator';
import { DataImportExcelInfoService } from '~/services/dataimp-service/data-import-excel-info.service';
import { Form } from "element-ui";

@Component({})
export default class CaseBatchDelete extends Vue {
  @Dependencies(DataImportExcelInfoService) private dataImportExcelInfoService: DataImportExcelInfoService;

  @Prop()
  private batchList:any[]

  private deleteModel: any = {
    batchNumber: '',
  };

  private rules = {
    batchNumber: { required: true, message: "请选择要删除的案件批次号！" }
  }

  private steplength: number = 0

  @Emit("success")
  private emitSuccess() {
    this.$message.success('案件删除成功');
    this.emitClose()
  }

  @Emit("close")
  private emitClose() {
    const form = this.$refs.form as Form;
    form.resetFields()
  }

  /**
   * 案件选择批次号删除
   */
  private deleteCase() {
    const form = this.$refs.form as Form;
    form.validate(v => {
      if (!v) return
      this.dataImportExcelInfoService
        .deleteDataExcelInfoByBatch(this.deleteModel)
        .subscribe(this.emitSuccess);
    })
  }
}
</script>
